<template>
	<!--票夹列表页-->
	<view class="ticketbox">
		<view class="ticket-top">
			<view class="ticket-top-item" v-for="(item,index) in toolsList" :key="index" @click="handleProject(item,index)">
				<view class="ticketicon saoma" :class="item.className"></view>
				<text class="font ticket-font">{{item.ticketName}}</text>
			</view>
		</view>
		<!--搜索-->
		<view class="searchbox">
			<view class="searchbox-left">
				<uni-easyinput prefixIcon="search" v-model="ticketParamsObj.companyName" placeholder="支持搜索购/销方名称" @iconClick="iconClick"></uni-easyinput>
			</view>
			<view @click="handlePopupShow">
				<text class="iconfont icon-shaixuan color6" style="font-size:20px;"></text>
				<text class="font color6">筛选</text>
			</view>
		</view>
		<!--列表-->
		<view class="ticketlistbox">
			<block v-if="ticketList.length > 0">
				<view class="ticketlistbox-item" v-for="(list,index) in ticketList" :key="index" @click="handleTicket(list,index)">
					<view class="ticketlistbox-item-title">
						<text class="ticketdate">{{list.dateTime}}</text>
						<text class="ticketmoney">¥ {{list.price}}</text>
					</view>
					<view class="ticketlistbox-item-con">
						<!--电票-->
						<view class="dpbox">
							<view class="dpbox-left">
								<view class="dot blue" style="margin-bottom:11rpx;"></view>
								<view class="line"></view>
								<view class="dot orange"></view>
							</view>
							<view class="dpbox-right">
								<text style="margin-bottom:10rpx;">南京未来科技有限公司</text>
								<text>四川将将好企业有限公司</text>
							</view>
						</view>
						<!--火车-->
						<view class="trainbox">
							<text>南京</text>
							<text class="arrowline"></text>
							<text>成都</text>
						</view>
						<!--定额-->
						<view class="pricebox">
							<text class="iconfont icon-suozaidi" style="color:#A2A2AD;margin-right:12rpx;"></text>
							<text>浙江省宁波市</text>
						</view>
						<!--行程单-->
						<view class="trainbox">
							<text>深圳</text>
							<text class="arrowline"></text>
							<text>南京</text>
							<text>、</text>
							<text>丽江</text>
							<text class="arrowline"></text>
							<text>大理</text>
							<text style="margin-left:6rpx">等</text>
						</view>
					</view>
					<view class="ticketlistbox-item-bot">
						<view class="tickettype commonbox">
							<text>{{orderTypeContent[list.ticketType]}}</text>
						</view>
						<view class="commonbox" :class="applyTypeList[list.ticketType-1]['className']">
							<text>{{applyTypeList[list.ticketType-1]['applyName']}}</text>
						</view>
						<view class="commonbox" :class="auditTypeList[list.auditType-1]['className']">
							<text>{{auditTypeList[list.auditType-1]['auditName']}}</text>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="emptybox">
					<view class="emptyimgbox">
						<image src="@/static/images/empty.png"></image>
						<text>暂无发票</text>
					</view>
				</view>
			</block>
		</view>
		<!--筛选框展示-->
		<u-popup :show="show" :round="10" mode="bottom" closeable @close="handlePopupHide">
			<view class="popupbox">
				<view class="popuptitle">
					<text>全部筛选</text>
					
				</view>
				<view class="typebox">
					<view class="typebox-title">
						<text class="font ticket-font">发票类型</text>
						<text class="remarkfont">支持多选</text>
					</view>
					<view class="typebox-content">
						<view class="typelist" :class="item.isChoose?'active':''" v-for="(item,index) in typeList" :key="index" @click="handleType(item,index)"> 
							<text>{{item.typeName}}</text>
						</view>
						<view class="showmore" @click="toggleShowMore">
							<text>{{showMore?'收起':'查看更多'}}</text>
							<text v-if="showMore" class="iconfont icon-up"></text>
							<text v-else class="iconfont icon-down"></text>
						</view>
					</view>
				</view>
				<!--日期-->
				<view class="typebox">
					<view class="typebox-title">
						<text class="font ticket-font">开票日期</text>
					</view>
					<view></view>
				</view>
				<!--报销 -->
				<view class="typebox">
					<view class="typebox-title">
						<text class="font ticket-font">报销状态</text>
						<text class="remarkfont">支持多选</text>
					</view>
					<view class="typebox-content">
						<view class="typelist" :class="item.isChoose?'active':''" v-for="(item,index) in paymentList" :key="index" @click="handleType(item,index)"> 
							<text>{{item.typeName}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="handlebox">
				<view class="handlebox-con">
					<view class="handle-item graybox">
						<text>重置</text>
					</view>
					<view class="handle-item bluebox">
						<text>完成</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	<bottomTabBar :tabIndex="0"></bottomTabBar>
</template>

<script setup>
	import bottomTabBar from '@/components/bottomTabBar/index.vue'
	import {orderTypeContent,applyTypeList,auditTypeList} from '@/utils/const.js'
	import {getTicketList} from '@/api/ticket.js'
	import {reactive, ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app';
	//工具
	let toolsList = reactive([
		{
			id:'1',
			className:'saoma',
			ticketName:'扫码录票'
		},
		{
			id:'2',
			className:'paizhao',
			ticketName:'识别拍照'
		},
		{
			id:'3',
			className:'wenjian',
			ticketName:'文件录入'
		},
		{
			id:'4',
			className:'shoudong',
			ticketName:'手动录入'
		},
	])
	//发票类型
	let typeList = reactive([
		{
			id:'01',
			isChoose:false,
			typeName:'增值税专用发票'
		},
		{
			id:'02',
			isChoose:false,
			typeName:'增值税电子专用发票'
		},
		{
			id:'03',
			isChoose:false,
			typeName:'增值税普通发票'
		},
		{
			id:'04',
			isChoose:false,
			typeName:'增值税普通发票（卷票）'
		},
		{
			id:'05',
			isChoose:false,
			typeName:'增值税电子普通发票（含通行费发票）'
		},
		{
			id:'06',
			isChoose:false,
			typeName:'电子发票（增值税专用发票）'
		}
	])
	//报销类型
	let paymentList = reactive([
		{
			id:'011',
			isChoose:false,
			typeName:'未报销'
		},
		{
			id:'012',
			isChoose:false,
			typeName:'报销中'
		},
		{
			id:'013',
			isChoose:false,
			typeName:'已报销'
		},
		{
			id:'014',
			isChoose:false,
			typeName:'部分已报销'
		}
	])
	//筛选类型
	let chooseTypeList = reactive([])
	//票夹列表
	let ticketList = reactive([
		{
			dateTime:'2023-12-25',
			price:'21.30',
			ticketType:1,//1电票2火车3定额4行程单
			applyType:1,//1报销中2未报销3已报销4部分已报销
			auditType:1,//1审核失败2审核成功
		},
		{
			dateTime:'2023-10-21',
			price:'258',
			ticketType:2,//1电票2火车3定额4行程单
			applyType:2,//1报销中2未报销3已报销4部分已报销
			auditType:2,//1审核失败2审核成功
		},
		{
			dateTime:'2023-08-05',
			price:'21.30',
			ticketType:3,//1电票2火车3定额4行程单
			applyType:3,//1报销中2未报销3已报销4部分已报销
			auditType:1,//1审核失败2审核成功
		},
		{
			dateTime:'2023-12-25',
			price:'2,333.30',
			ticketType:4,//1电票2火车3定额4行程单
			applyType:4,//1报销中2未报销3已报销4部分已报销
			auditType:1,//1审核失败2审核成功
		},
		{
			dateTime:'2023-03-06',
			price:'21.30',
			ticketType:3,//1电票2火车3定额4行程单
			applyType:3,//1报销中2未报销3已报销4部分已报销
			auditType:1,//1审核失败2审核成功
		},
		{
			dateTime:'2023-12-25',
			price:'21.30',
			ticketType:1,//1电票2火车3定额4行程单
			applyType:1,//1报销中2未报销3已报销4部分已报销
			auditType:1,//1审核失败2审核成功
		},
		{
			dateTime:'2023-10-21',
			price:'258',
			ticketType:2,//1电票2火车3定额4行程单
			applyType:3,//1报销中2未报销3已报销4部分已报销
			auditType:2,//1审核失败2审核成功
		},
		{
			dateTime:'2023-08-05',
			price:'¥ 21.30',
			ticketType:3,//1电票2火车3定额4行程单
			applyType:3,//1报销中2未报销3已报销4部分已报销
			auditType:1,//1审核失败2审核成功
		}
	])
	//筛选框展示
	let show = ref(false)
	//筛选查看更多
	let showMore = ref(false)
	//请求参数
	let ticketParamsObj = reactive({
		reimburseStatus:0,//
		companyName:'',
		issueDateEnd:'2024-01-20T00:33:30.320Z',
		issueDateStart:'2024-01-20T00:33:30.320',
		tenantId:899677594037915648,
		invoiceType:[''],
		pageSize:0,
		pageNum:0,
		userId:1197135210906750976,
	})
	//onLoad
	onLoad(()=>{
		ticketParamsObj.companyName = uni.getStorageSync('companyName')
		// ticketParamsObj.tenantId = uni.getStorageSync('tenantId')
		// ticketParamsObj.userId = uni.getStorageSync('userId')
		//获取票夹列表
		getTicket()
		
	})
	//获取票夹列表
	const getTicket = ()=>{
		console.log('ticketParamsObj',ticketParamsObj)
		getTicketList(ticketParamsObj).then(res=>{
			
		})
	}
	//点击导航
	const handleProject = (val,idx)=>{
		switch (val.className) {
			case 'saoma':
				uni.scanCode({
					success: (res) => {},
					fail:(err)=>{
						uni.showToast({
							title: '扫码录入失败',
							icon: 'success',
							duration: 2000
						})
					}
				})
				break;
			case 'paizhao':
				console.log('paizhao')
				break;
			case 'wenjian':
					console.log('wenjian')
					break;
			default:
					uni.navigateTo({
						url:'/pages/handEnter/index'
					})
		}
	}
	//点击筛选弹出层
	const handlePopupShow = ()=>{
		show.value = true
	}
	//点击关闭筛选弹层隐藏
	const handlePopupHide = ()=>{
		show.value = false
	}
	//点击筛选类型
	const handleType = (value,index)=>{
		value.isChoose =! value.isChoose
		if(chooseTypeList.includes(index)){
			chooseTypeList = chooseTypeList.filter(i=>i != index)
			console.log(11111,chooseTypeList)
		}else{
			chooseTypeList.push(index)
			console.log(2222,chooseTypeList)
		}
	}
	//点击筛选查看更多
	const toggleShowMore = ()=>{
		showMore.value = !showMore.value
		if(showMore.value){
			typeList = typeList.concat([
				{
					id:'07',
					isChoose:false,
					typeName:'电子发票'
				},
				{
					id:'08',
					isChoose:false,
					typeName:'增值税电子'
				},
				{
					id:'09',
					isChoose:false,
					typeName:'电子发票（增值）'
				}
			])
		}else{
			typeList = typeList.splice(0,6)
		}
	}
	//点击列表查看详情
	const handleTicket = (value,index)=>{
		uni.navigateTo({
			url:'/pages/ticketList/detail'
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .is-input-border{
		border:none !important;
		border-radius:16rpx !important;
	}
	::v-deep .uni-easyinput__content-input{
		height:64rpx;
		line-height: 64rpx;
	}
	.font{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 28rpx;
		letter-spacing: 0;
	}
	.color6{
		color:#666;
	}
	.ticketbox{
		overflow-y: auto;
		background:#F6F8FA;
		padding:24rpx 24rpx 152rpx;
		.ticket-top{
			display:flex;
			justify-content: space-evenly;
			align-items: center;
			padding:24rpx 32rpx;
			margin-bottom:24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			.ticket-top-item{
				flex:1;
				display: flex;
				align-items: center;
				flex-direction: column;
				.ticketicon{
					width:70rpx;
					height:70rpx;
				}
				.saoma{
					background:url('@/static/images/saomalupiao.png') no-repeat;
					background-size: 100% auto;
				}
				.paizhao{
					background:url('@/static/images/paizhaoshibie.png') no-repeat;
					background-size: 100% auto;
				}
				.wenjian{
					background:url('@/static/images/wenjianluru.png') no-repeat;
					background-size: 100% auto;
				}
				.shoudong{
					background:url('@/static/images/shoudongluru.png') no-repeat;
					background-size: 100% auto;
				}
				.ticket-font{
					color:#333;
				}
			}
		}
		.searchbox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.is-input-border{
				border-radius: 16rpx !important;
				border:none !important;
			}
			.searchbox-left{
				width:80%;
				height:64rpx;
			}
		}
		.ticketlistbox{
			padding-top:24rpx;
			.commonbox{
				height:40rpx;
				line-height:40rpx;
				padding:0 16rpx;
				margin-right:16rpx;
				border-radius: 8rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 24rpx;
			}
			.ticketlistbox-item{
				padding: 24rpx;
				margin-bottom:24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				.ticketlistbox-item-title{
					display: flex;
					justify-content: space-between;
					margin-bottom:24rpx;
					.ticketdate{
						font-family: DINAlternate-Bold;
						font-weight: 700;
						font-size: 36rpx;
						color: #333333;
					}
					.ticketmoney{
						font-family: DINAlternate-Bold;
						font-weight: 700;
						font-size: 32rpx;
						color: #FA7B29;
						letter-spacing: 0;
					}
				}
				.ticketlistbox-item-con{
					margin-bottom:24rpx;
					.dpbox{
						display: flex;
						justify-content: flex-start;
						.dpbox-left{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							flex:0 0 10rpx;
							margin-right:18rpx;
							.blue{
								background: #296DFA;
							}
							.orange{
								background: #FA7B29;
							}
							.dot{
								width: 10rpx;
								height: 10rpx;
								border-radius:50%;
							}
							.line{
								width:2rpx;
								height:24rpx;
								margin-bottom: 11rpx;
								background:#DEDEE2;
							}
						}
						.dpbox-right{
							display: flex;
							flex-direction: column;
							line-height: 38rpx;
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}
					.trainbox{ 
						display: flex;
						align-items: center;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						.arrowline{
							position:relative;
							width:58rpx;
							height:2rpx;
							margin:6rpx 20rpx 0;
							background:#A2A2AD;
							& :after{
								content:' ';
								position:absolute;
								right:1rpx;
								top:-10rpx;
								display: block;
								width:20rpx;
								height:20rpx;
								border-top: 2rpx solid #A2A2AD;
								background:transparent;
								transform: rotate(45deg);
							}
						}
					}
					.pricebox{
						display: flex;
						align-items: center;
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}
				}
				.ticketlistbox-item-bot{
					display: flex;
					.tickettype{
						background: #296dfa1a;
						color: #296DFA;
					}
					.ticketapplygray{
						background: #EEEEEE;
						color: #888888;
					}
					.ticketapplygreen{
						background: #EAF6E4;
						color: #4DB315;
					}
					.ticketapplyyellow{
						background: #FEF6E9;
						color: #FA7929;
					}
					.ticketapplyred{
						background: #FFEDEE;
						color: #F13842;
					}
				}
			}
			.emptybox{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height:calc(100vh - 250px);
				.emptyimgbox{
					width:372rpx;
					height:200rpx;
					margin-bottom:80rpx;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 24rpx;
					color: #A2A2AD;
					text-align:center;
					& image{
						width:100%;
						height:100%;
						margin-bottom:18rpx;
					}
				}
			}
		}
	}
	
	.popupbox{
		height:1044rpx;
		overflow-y:auto;
		padding:32rpx 32px 170rpx;
		box-sizing: border-box;
		.popuptitle{
			margin-bottom:24rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			font-size: 32rpx;
			color: #333;
			letter-spacing: 0;
			text-align: center;
		}
		.typebox{
			.typebox-title{
				.remarkfont{
					margin-left: 24rpx;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					letter-spacing: 0;
				}
			}
			.typebox-content{
				overflow:hidden;
				display: flex;
				flex-wrap: wrap;
				padding-top:24rpx;
				.typelist{
					padding:16rpx 24rpx;
					margin-bottom:24rpx;
					margin-right:24rpx;
					background: #F6F6F6;
					border-radius: 36rpx;
				}
				.active{
					background: #EAF1FF;
					color: #296DFA;
				}
				.showmore{
					height:72rpx;
					line-height: 72rpx;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 28rpx;
					color: #296DFA;
				}
			}
		}
	}
	.handlebox{
		position: fixed;
		bottom:0;
		left:0;
		width:100%;
		padding:32rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0 2rpx 20rpx 0 #d1d1d145;
		.handlebox-con{
			display: flex;
			justify-content: space-between;
			.handle-item{
				flex: 1;
				margin-right:46rpx;
			}
			.graybox{
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #FFFFFF;
				color: #296DFA;
				border: 2rpx solid #D9D9D9;
				border-radius: 40rpx;
			}
			.bluebox{
				line-height: 80rpx;
				text-align: center;
				height: 80rpx;
				background: #296DFA;
				color:#fff;
				border-radius: 40rpx;
			}
		}
	}
</style>